<template>
  <div class="operation-log">
    <el-card class="box-card">
      <!--筛选条件-->
      <el-form :inline="true" :model="searchForm" ref="searchForm" class="demo-form-inline">
        <el-form-item label="操作名称" prop="operationName">
          <el-input v-model="searchForm.operationName" placeholder="操作名称"></el-input>
        </el-form-item>
        <el-form-item label="时间" prop="createTime">
          <el-date-picker
              ref="datePicker"
              v-model="searchForm.createTime"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: auto"
              @change="dateFormat"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchSubmit">查询</el-button>
          <el-button @click="searchReset">重置</el-button>
        </el-form-item>
      </el-form>

      <!--表格操作-->
      <el-row style="text-align: left;margin-bottom: 5px;">
        <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeOperationLog">删除</el-button>
      </el-row>

      <!--表格-->
      <template>
        <el-table
            :data="tableData"
            border
            style="width: 100%;min-height: 400px;"
            @selection-change="handleSelectionChange">
          <el-table-column
              align="center"
              type="selection"
              width="40">
          </el-table-column>
          <el-table-column
              align="center"
              type="index"
              label="序号">
          </el-table-column>
          <el-table-column
              align="center"
              prop="module"
              label="模块"
              :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
              align="center"
              prop="operationName"
              label="操作名">
          </el-table-column>
          <el-table-column
              align="center"
              prop="method"
              label="方法名"
              :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
              align="center"
              prop="requestIp"
              label="IP">
          </el-table-column>
          <el-table-column
              align="center"
              prop="requestLocation"
              label="位置"
              :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
              align="center"
              prop="requestUrl"
              label="请求地址">
          </el-table-column>
          <el-table-column
              align="center"
              prop="requestMethod"
              label="请求方式">
          </el-table-column>
          <el-table-column
              align="center"
              prop="costTime"
              label="耗时(ms)">
          </el-table-column>
          <el-table-column
              align="center"
              label="状态">
            <template slot-scope="scope">
              <el-button type="text" style="color: green" v-if="scope.row.successFlag">成功</el-button>
              <el-button type="text" style="color: #f13636" v-if="!scope.row.successFlag">失败</el-button>
            </template>
          </el-table-column>
          <el-table-column
              align="center"
              prop="createTime"
              label="创建时间">
          </el-table-column>
          <el-table-column
              align="center"
              label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="openDialog(scope.row)">详情</el-button>
              <el-button type="text" style="color: #f13636" @click="removeOperationLog(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>

      <!--分页-->
      <div class="block">
        <el-pagination
            align="right"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.pageNum"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total">
        </el-pagination>
      </div>
    </el-card>

    <!--详情-->
    <el-dialog title="日志详情" :visible.sync="dataFormVisible" width="900px">
      <el-form :model="dataForm" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="模块">
              <el-input v-model="dataForm.module" :disabled="true" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="操作名">
              <el-input v-model="dataForm.operationName" :disabled="true" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="方法">
              <el-input v-model="dataForm.method" :disabled="true" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态">
              <el-input :disabled="true" :value="dataForm.successFlag ? '成功' : '失败' " autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="请求地址">
              <el-input v-model="dataForm.requestUrl" :disabled="true" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="请求方法">
              <el-input v-model="dataForm.requestMethod" :disabled="true" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="请求ip">
              <el-input v-model="dataForm.requestIp" :disabled="true" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="请求位置">
              <el-input v-model="dataForm.requestLocation" :disabled="true" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="耗时">
              <el-input v-model="dataForm.costTime" :disabled="true" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="操作时间">
              <el-date-picker
                  style="width: 340px"
                  v-model="dataForm.createTime"
                  type="datetime"
                  :disabled="true">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="请求参数">
              <el-input type="textarea" v-model="dataForm.requestParam" :disabled="true" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="响应数据">
              <el-input type="textarea" v-model="dataForm.responseData" :disabled="true" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="异常信息">
              <el-input type="textarea" v-model="dataForm.errorMsg" :disabled="true" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dataFormVisible = false">关 闭</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {listOperationLog, removeOperationLog} from "@/api/operationlog";
import {Message, MessageBox} from "element-ui";

export default {
  name: 'operationLog',
  components: {},
  data() {
    return {
      searchForm: {
        operationName: '',
        startTime: '',
        endTime: ''
      },
      selectRowIds: [],
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      tableData: [],
      dataFormVisible: false,
      dataForm: {}
    }
  },
  created() {
    this.listOperationLog();
  },
  methods: {
    // 获取时间区间
    dateFormat(picker) {
      this.searchForm.startTime = picker[0] + ' 00:00:00.000';
      this.searchForm.endTime = picker[1] + ' 23:59:59.999';
    },
    listOperationLog() {
      listOperationLog({
        pageNum: this.page.pageNum,
        pageSize: this.page.pageSize,
        name: this.searchForm.operationName,
        startTime: this.searchForm.startTime,
        endTime: this.searchForm.endTime
      }).then(res => {
        this.tableData = res.data.results;
        this.page.total = res.data.total;
      })
    },
    searchSubmit() {
      this.listOperationLog();
    },
    searchReset() {
      this.$refs.searchForm.resetFields();
      this.searchForm.startTime = '';
      this.searchForm.endTime = '';
      this.listOperationLog();
    },
    handleSelectionChange(val) {
      this.selectRowIds = [];
      for (let e of val) {
        this.selectRowIds.push(e.id);
      }
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.listOperationLog();
    },
    handleCurrentChange(val) {
      this.page.pageNum = val;
      this.listOperationLog();
    },
    // 弹窗
    openDialog(row) {
      this.dataFormVisible = true;
      this.dataForm = Object.assign({}, row);
    },
    // 删除日志
    removeOperationLog(row) {
      const ids = row.id || this.selectRowIds;
      MessageBox.confirm('是否确认删除所选数据', "系统提示", {
        type: "warning",
      }).then(() =>
          removeOperationLog(ids).then(() => {
            Message.success("删除成功");
            this.listOperationLog();
          })
      );
    }
  }
}
</script>

<style scoped>
.block {
  margin-top: 10px;
}
</style>
